<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗组件测试</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div style="padding: 20px;">
        <h1>弹窗组件测试</h1>
        
        <div style="margin-bottom: 20px;">
            <button onclick="testBasicDialog()">基础弹窗</button>
            <button onclick="testAlert()">警告弹窗</button>
            <button onclick="testConfirm()">确认弹窗</button>
            <button onclick="testCustomDialog()">自定义弹窗</button>
        </div>
    </div>

    <!-- 弹窗组件结构 -->
    <div class="dialog-mask" id="dialogMask">
        <div class="dialog-container">
            <!-- 弹窗头部 -->
            <div class="dialog-header">
                <h3 class="dialog-title" id="dialogTitle">标题</h3>
                <button class="dialog-close" id="dialogClose" aria-label="关闭">×</button>
            </div>
            
            <!-- 弹窗主内容区 -->
            <div class="dialog-body" id="dialogBody">
                <p>这里是弹窗的内容区域</p>
            </div>
            
            <!-- 弹窗按钮区域 -->
            <div class="dialog-footer" id="dialogFooter">
                <button class="dialog-btn dialog-btn-cancel" id="dialogCancel">取消</button>
                <button class="dialog-btn dialog-btn-confirm" id="dialogConfirm">确定</button>
            </div>
        </div>
    </div>

    <script src="dialog.js"></script>
    <script>
        // 测试基础弹窗
        function testBasicDialog() {
            Dialog.open({
                title: '基础弹窗',
                content: '这是一个基础的弹窗示例，包含标题、内容和按钮。',
                onConfirm: function() {
                    console.log('用户点击了确定');
                },
                onCancel: function() {
                    console.log('用户点击了取消');
                }
            });
        }

        // 测试警告弹窗
        function testAlert() {
            Dialog.alert('这是一个警告消息！', function() {
                console.log('用户确认了警告');
            });
        }

        // 测试确认弹窗
        function testConfirm() {
            Dialog.confirm('确定要删除这个文件吗？', function() {
                console.log('用户确认删除');
            }, function() {
                console.log('用户取消删除');
            });
        }

        // 测试自定义弹窗
        function testCustomDialog() {
            Dialog.open({
                title: '添加应用',
                content: `
                    <div>
                        <p>请选择要添加的应用：</p>
                        <input type="file" id="appFile" style="margin: 10px 0; width: 100%;">
                        <p style="font-size: 12px; color: #666;">支持 .exe 文件</p>
                    </div>
                `,
                confirmText: '添加',
                cancelText: '取消',
                onConfirm: function() {
                    var fileInput = document.getElementById('appFile');
                    if (fileInput.files.length > 0) {
                        console.log('选择的文件:', fileInput.files[0].name);
                    } else {
                        alert('请选择一个文件');
                        return false; // 阻止关闭
                    }
                }
            });
        }
    </script>
</body>
</html>
